<template>
  <el-form-item :label="i18nt('designer.setting.y')">
    <el-input-number
      v-model="optionModelY"
      :min="0"
      :max="maxY"
      class="hide-spin-button"
      style="width: 100%"
      :disabled="disabled"
      @change="onChange"
    ></el-input-number>
  </el-form-item>
</template>

<script>
export default {
  name: 'YEditor',
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
    disabled: {
      type: Boolean,
      default: false
    },
    parentWidget: Object
  },
  data() {
    return {
      optionModelY: this.optionModel.y
    }
  },
  computed: {
    maxY() {
      const {
        id,
        type,
        size,
        options: { scrollHeight, scrollType, height }
      } = this.parentWidget

      if (id === this.selectedWidget.id) {
        return this.designer.size.height
      }

      if (type === 'Page') {
        const editWidget = this.designer.editedWidget
        if (
          editWidget &&
          editWidget.type === 'module' &&
          (editWidget.options.scrollType === 1 || editWidget.options.scrollType === 3)
        ) {
          return (
            Math.max(editWidget.options.height, editWidget.options.scrollHeight) -
            this.selectedWidget.options.height
          )
        }
        return size.height - this.selectedWidget.options.height
      }

      if (type === 'module' && (scrollType === 1 || scrollType === 3)) {
        return scrollHeight - this.selectedWidget.options.height
      }
      return height - this.selectedWidget.options.height
    }
  },
  watch: {
    'optionModel.y': {
      handler(val) {
        this.optionModelY = val
      }
    }
  },
  methods: {
    onChange(val) {
      this.optionModel.y = val
    }
  }
}
</script>

<style scoped></style>
